<template>
  <div class="header">
    <el-menu :default-active="activeIndex" class="header-menu" mode="horizontal" :ellipsis="false" @select="handleSelect">
      <el-menu-item index="0">bug姜姜的理想国</el-menu-item>
      <div class="header-menu-divider" />
      <el-menu-item index="1"><router-link to="/home">首页</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/blog">写作</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/photo">摄影</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/resume">关于我</router-link></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
const router = useRouter()

export default {
  name: "app-header",
  data(){
    return {
      activeIndex:1
    }
  },
  methods:{
    handleSelect:function (key,keyPath){
    }
  }
}
</script>

<style scoped>
.header{
  width: 1024px;
  height: 60px;
  margin: 0 auto;
}
.header a{
  text-decoration: none;
}
.header-menu-divider{
  flex-grow: 1;
}

</style>
